<template>
  <div class="instiutionTable">
    <u-table
      :data="instiutionTableData"
      :border="false"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      :show-overflow-tooltip="true"
      :row-class-name="tableRowClassName"
      ref="instiutionTable"
      v-loading="showLoading"
      class="m7-table"
    >
      <template v-for="(item, index) in instiutionTableHeader">
        <u-table-column
          v-if="item.handlers"
          :border-line="false"
          :key="index"
          :width="item.width"
          v-bind="item"
        >
          <template slot-scope="scope">
            <span
              v-for="(handler, index) in item.handlers"
              @click.stop="handler.handleFn(scope)"
              :key="index"
            >
              <span
                class="opera-span"
                :class="handler.className"
                v-if="
                  scope.row[handler.field] === handler.status &&
                  (!handler.isShowSystemDelBtn ||
                    scope.row.createUser !== 'system') &&
                  !scope.row.isDefault
                "
                >{{ handler.name }}</span
              >
            </span>
          </template>
        </u-table-column>
        <u-table-column
            :key="index"
            :sortable="item.isSort"
            v-else-if="item.custom"
            v-bind="item"
          >
            <template slot-scope="scope">
              <slot :name="item.prop" :scope="scope" :item="item" />
            </template>
          </u-table-column>
        <u-table-column
          v-else-if="item.type === 'input'"
          :key="index"
          :width="item.width"
          v-bind="item"
        >
          <template slot-scope="{ row }">
            <el-input
              v-model="row[item.prop]"
              style="width: 100%"
              class="line-input"
              @click.stop.native="item.handleClick($event, row)"
              @input="item.handleFocus(row)"
              @blur="item.handleBlur(row)"
            />
          </template>
        </u-table-column>
        <u-table-column
          v-else-if="item.type === 'inputNumber'"
          :width="item.width"
          :key="index"
          :label="type === 2 ? item.outLabel : item.inLabel"
          :prop="item.prop"
        >
          <template slot-scope="{ row }">
            <!-- 检验出库数量 <= 库存数 :max="type === 2 ? row[item.limitNum] : Infinity" -->
            <el-input-number
              v-model="row[item.prop]"
              :controls="false"
              :min="1"
              @change="item.handleNumChange($event, row)"
              style="width: 80%"
              class="line-input"
            />
          </template>
        </u-table-column>
        <u-table-column
          :key="index"
          :sortable="item.isSort"
          :show-overflow-tooltip="item.width && item.width > 0"
          v-else
          v-bind="item"
        >
        </u-table-column>
      </template>
    </u-table>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Ref } from 'vue-property-decorator'
import customHeader from '@/common/views/institutionTable/customHeader.vue'
import { Table as UTable } from 'element-ui'
interface ArrayObj {
  props: string
}
@Component({
  name: 'chooseTable',
  components: {
    customHeader
  }
})
export default class InstiutionTable extends Vue {
  @Prop(Array) public instiutionTableHeader!: ArrayObj[] // 表头
  @Prop(Array) public instiutionTableData!: ArrayObj[] // 表格数据
  @Prop() private type!: number // 出入库
  @Ref() private readonly instiutionTable!: UTable
  private showLoading: any = false
  private checkList: any = []

  get getHeadersShowLength () {
    let length = 0
    this.checkList.forEach((item) => {
      if (item.show) {
        length++
      }
    })
    return length
  }

  private headerCellStyle ({ row, column, rowIndex, columnIndex }) {
    const oprateIndex = this.getHeadersShowLength - 1
    if (columnIndex === oprateIndex) {
      return { borderRight: '1px solid transparent', padding: 0 }
    }
  }

  private cellStyle () {
    return {
      backgroundColor: '#fff'
    }
  }

  private tableRowClassName ({ row, rowIndex }) {
    // 把每一行的索引放进row
    row.index = rowIndex;
  }
}
</script>
<style lang="stylus" scoped>
.instiutionTable
  display flex
  flex-direction column
  justify-content space-between
  height 100%
  font-size 12px
  width 100%
.line-input
  >>> .el-input__inner
    border none
    background-color #F3F6F9
.opera-span
  color $c-main
  margin-right 10px
  cursor pointer
.danger
  color $c-danger
.m7-table
  font-size 12px
  font-family PingFang SC
  color #303753
  >>> .el-table__header th
    padding 0
    height 34px
  >>> .el-table__body td
    padding 0
    height 40px
</style>
